<template>
  <div class="box">
    <div class="card" v-for="item in tableData" :key="item" @click="details">
      <div class="LeftBox">
        <div class="mess1">
          <div class="mess2">品种代码</div>
          <div class="mess3" style="color: #fe0030">{{ item.symbol }}</div>
        </div>
        <div class="mess1">
          <div class="mess2">股票名称</div>
          <div class="mess3" style="color: red">
            {{ item.transaction.exchange }}
          </div>
        </div>
        <div class="mess1">
          <div class="mess2">最新价</div>
          <div class="mess3" style="color: yellow">
            {{ towNumber(item.transaction.open_order.executed_no) }}
          </div>
        </div>
        <div class="mess1">
          <div class="mess2">策略名称</div>
          <div class="mess3" style="color: #4b8bff">
            {{ item.indicator_name }}
          </div>
        </div>
      </div>
      <div class="RightBox">
        <div class="mess1">
          <div class="mess4">策略周期</div>
          <div class="mess5">{{ item.period_type }}</div>
        </div>
        <div class="mess1">
          <div class="mess4">任务状态</div>
          <div class="mess5">{{ item.status }}</div>
        </div>
        <div class="mess1">
          <div class="mess2">浮动盈亏(%)</div>
          <div class="mess3">
            {{ towNumber(item.transaction.profit_percent / 1000) + '%' }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  computed: {
    tableData() {
      return this.$store.state.data1
    }
  },
  methods: {
    details() {
      this.$router.push({ path: '/mobliedata1' })
    },
    towNumber(val) {
      return Number(val).toFixed(2)
    }
  }
}
</script>
<style Lang="less" scoped>
.box {
  display: flex;
  flex-direction: column;
  background-color: #0e0c22;
}
.back {
  color: #ffffff;
  margin-left: 10px;
}
.title {
  color: #00ffff;
  margin: 5px auto 5px auto;
  font-size: 22px;
}
.card {
  margin: 30px 15px 0px 15px;
  background-color: #201e33;
  color: #ffffff;
  font-family: PingFang SC;
  margin-top: 0;
  margin-bottom: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
}
.LeftBox {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  flex: 3;
}
.RightBox {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  flex: 4;
}
.mess1 {
  display: flex;
  flex-direction: row;
}
.mess2 {
  letter-spacing: 2px;
  font-size: 13px;
  font-family: PingFang-SC-Regular;
  margin: 6px 0 6px 10px;
  flex: 1;
}
.mess3 {
  font-size: 10px;
  margin: 6px -10px 6px 2px;
  flex: 1.2;
  display: flex;
  flex-direction: row;
}
.mess4 {
  letter-spacing: 2px;
  font-size: 13px;
  margin: 6px 0 6px 10px;
  flex: 1;
}
.mess5 {
  font-size: 10px;
  margin: 6px -10px 6px 2px;
  flex: 2;
  display: flex;
  flex-direction: row;
}
</style>
